<div>
    <fieldset>
        <legend>Новый тип документа</legend>

        <span class="ErrorMessage" data-field="log"></span>
        <div style="padding-bottom: 0.3em">
            Название <input type="text" id="name" value="<?php echo @$this->data['name']; ?>"/>

        </div>

        <span class="ErrorMessage" data-field="name"></span>
        <span class="ErrorMessage" data-field="fields"></span>

        <div>
            <div style="float: left">
                <?php echo $this->FieldList("FieldList")->ToHtml(); ?>
            </div>

            <div style="float: left; margin: 1px">
                <div style="height: 100px"></div>
                <button id="AddField" style="width:4em">=&gt;</button><br/>
                <button id="DelField" style="width:4em">&lt;=</button>
            </div>

            <div style="float: left">
                <?php echo $this->FieldList("SelectFieldList", true)->ToHtml(); ?>
            </div>
        </div>

    </fieldset>

    <div class="ControlPanel">
        <button id="AddType">Сохранить</button>
        <button id="CancelAdd">Отмена</button>
    </div>

    <script type="text/javascript">
        jsun.run(function() {
        //////////////////////////////////////////////////////

        jsun("#AddType").jsun.event({ onclick: AddType });
        jsun("#CancelAdd").jsun.event({ onclick: CancelAdd });

        jsun("#AddField").jsun.event({ onclick: AddField });
        jsun("#DelField").jsun.event({ onclick: DelField });

        function AddType() {
            var fields = jsun("#SelectFieldList").options,
                str = fields[0] ? fields[0].value : "";
            for (var i = 1; i < fields.length; ++i) {
                str += "," + fields[i].value;
            }
            var param = "u=Edition/AddEditType&p=Lib\\EditType/Add"
                + "&name=" + jsun("#name").value
                + "&fields=" + str;

            jsun.json.load(function(p) {
                if (p.STAT == 'OK') {
                    window.location.reload();
                } else {
                    jsun.show_err(p);
                }
            }, param);

        }

        function CancelAdd() {
            return jsun.dialog.active.close();
        }

        function AddField() {
            var select_list = jsun("#SelectFieldList"),
                list = jsun("#FieldList"),
                childs = list.options;
            for (var i = 0; i < childs.length; ++i) {
                if (childs[i].selected) {
                    select_list.appendChild(childs[i].cloneNode(1));
                    childs[i].parentNode.removeChild(childs[i]);
                    --i;
                }
            }
        }

        function DelField() {
            var select_list = jsun("#SelectFieldList"),
                list = jsun("#FieldList"),
                childs = select_list.options;
            for (var i = 0; i < childs.length; ++i) {
                if (childs[i].selected) {
                    list.appendChild(childs[i].cloneNode(1));
                    childs[i].parentNode.removeChild(childs[i]);
                    --i;
                }
            }
        }

        ///////////////////////////////////////////////////////
        });
    </script>
</div>